<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script type="text/javascript">
$(document).ready(function(){

    function reloadCaptcha() {
        var image = new Image();
        image.onload = function() {
            $("#reg-captcha").html(image);
        }
        image.width = 215;
        image.height = 50;
        image.src = '<c:url value="/captcha-image.html" />'+"?i="+Math.random();
    }

    $("#form_registration").submit(function(){
        $("#message_registration").empty();
        $(this).children("div.error-field").hide().empty();
        $.ajax({url: '<c:url value="/api/registration.json" />',
            type: "POST",
            data: $("#form_registration").serialize(),
            success: function(data, status) {
                if (data.error) {
                    for (var i in data.errors) {
                        if (data.errors[i].fieldName == "captchaCode")
                            reloadCaptcha();
                        break;
                    }
                    for (var i in data.errors) {
                        $("#form_registration-"+data.errors[i].fieldName).append(data.errors[i].message+"<br/>").show("slow");
                    }
                } else {
                    $('#message_registration').html("Успешная регистрация!");
                    $("#form_registration").hide('slow', function() {
                        window.location.reload();
                    });       
                }
            },
            error: function() {
                var message = "В данный момент сервер недоступен!";
                $('#message_registration').html(message);
                }
        });
        return false;
    });

    reloadCaptcha()
});
</script>
<div id="message_registration" style="padding:10px;color:red;"></div>
<form id="form_registration" method="post">
        <input type="text" name="fullName" placeholder="ФИО" size="30" />
        <div id="form_registration-fullName" class="error-field"></div>
        <input type="text" name="email" placeholder="Email" size="30" />
        <div id="form_registration-email" class="error-field"></div>
        <input type="password" name="password" placeholder="Пароль" size="30" />
        <div id="form_registration-password" class="error-field"></div>
        <input type="password" name="confirmPassword" placeholder="Повторите пароль" size="30" />
        <div id="form_registration-confirmPassword" class="error-field"></div>
        <div id="reg-captcha" style="text-align: center;"></div>
        <input type="text" name="captchaCode" placeholder="Введите код с картинки" size="30" />
        <div id="form_registration-captchaCode" class="error-field"></div>
        <input class="btn btn-primary" type="submit" name="commit" value="Зарегистрироваться" />
</form>